<template>
  <el-dialog :title="`${type==2?'编辑':'新增'}业务子类`" :visible.sync="dialogFormVisible" width="30%">
    <el-form ref="businessTypeForm" :rules="rules" :model="form" label-width="120px" label-position="right">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="业务类别" prop="fatherId">
            <el-select v-model="form.fatherId" placeholder="请选择业务类别" style="width: 90%" @change="changeBusinessType">
              <el-option v-for="item in businessTypes" :label="item.paymentType" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="子类序号" prop="serialNumber">
            <el-input style="width: 90%" v-model="form.serialNumber" placeholder="请输入序号" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="业务子类" prop="businessSubclass">
            <el-input style="width: 90%" v-model="form.businessSubclass" placeholder="请输入业务子类" maxlength="20"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as oaApi from "@/api/system/oa";
import {paymentTypeAdd, paymentTypeEdit} from "@/api/system/oa";

export default {
  props: {},
  data() {
    return {
      dialogFormVisible: false,
      type: 1,
      businessTypes: [],
      form: {
        fatherId: null,
        paymentType: null,
        serialNumber: null,
        businessSubclass: null,
      },
      rules: {
        fatherId: [
          {required: true, message: "请选择业务类别", trigger: "change"}
        ],
        serialNumber: [
          {required: true, message: "请输入序号", trigger: "blur"}
        ],
        businessSubclass: [
          {required: true, message: "请输入业务子类", trigger: "blur"}
        ],
      },
    }
  },
  computed: {},
  methods: {
    changeBusinessType(val) {
      const businessTypeObj = this.businessTypes.find(item => item.id == val);
      this.form.paymentType = businessTypeObj.paymentType;
    },
    show(type, row) {
      console.log('type', type)
      this.$refs?.businessTypeForm?.resetFields()
      this.type = type;
      if (type == 2) {//编辑
        this.$nextTick(()=>{
          this.form.fatherId = row.fatherId;
          this.form.paymentType = row.paymentType;
          this.form.serialNumber = row.serialNumber;
          this.form.businessSubclass = row.businessSubclass;
          console.log('form', this.form)
        })
      }
      this.dialogFormVisible = true
    },
    getBusinessType() {
      oaApi.paymentTypeList({
        fatherId: 0
      }).then(res => {
        this.businessTypes = res.rows
      })
    },
    saveForm() {
      this.$refs["businessTypeForm"]?.validate(valid => {
        if (valid) {
          if (this.type == 2) {
            oaApi.paymentTypeEdit(this.form).then(res => {
              this.dialogFormVisible = false
              this.$emit('success')
            })
          } else {
            oaApi.paymentTypeAdd(this.form).then(res => {
              this.dialogFormVisible = false
              this.$emit('success')
            })
          }
        }
      })
    }
  },
  mounted() {
    this.getBusinessType()
  },

}
</script>

<style lang="scss" scoped>
</style>